<template>
    <div id="monthWorkList">
      <el-dialog title="项目信息" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="选择文件" prop="name" :label-width="formLabelWidth">
            <el-col :span="12">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls、xlsx文件，且不超过10MB</div>
              </el-upload>
            </el-col>
          </el-form-item>          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="formSubmit('form')">确 定</el-button>
        </div>
      </el-dialog>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.user" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="success" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="files"
          label="文件">
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
export default {
  name: 'monthWorkList',
  data() {
    return {
      formInline: {
        user: '',
        date: ''
      },
      formLabelWidth: '320px',
      dialogFormVisible:false,
      fileList: [],
      tableData: []
    };
  },
  methods: {
    onSubmit() {
      var that = this.formInline;
    },
    //新增
    add() {
      var self = this;
      self.dialogFormVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload (file) {
        var fileName=new Array()
        fileName =file.name.split('.');
        const extension = fileName[fileName.length-1] === 'xls'
        const extension2 =  fileName[fileName.length-1]=== 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension && !extension2) {
            this.$message({
                message: '上传模板只能是xls、xlsx格式!',
                type: 'warning'
            });
            //console.log('上传模板只能是xls、xlsx格式!')
        }
        if (!isLt2M) {
            this.$message({
                message: '上传模板大小不能超过 10MB!',
                type: 'warning'
            });
            //console.log('上传模板大小不能超过 10MB!')
        }
        if (extension || extension2 && isLt2M == true) {
            console.log(typeof file)
            // let fd = new FormData()
            // fd.append('invoiceTypeId', this.invoice_type_id)//随文件上传的其他参数
            // fd.append('epid', this.epid)
            // fd.append('file', file)
            //console.log(fd)
            this.newImport(file).then(function (res) {//校验完成后提交
                console.log(res)
            }, function () {
                console.log('failed');
            });
            return true
        }
        return extension || extension2 && isLt2M
    },
    newImport (data) {
        var self = this;            
            self.postRequest("/monthly/uploadMonthly", {
              file_upload:data
            }).then(
              res => {      
                console.log(res+'111')     
                // if(res.data.result == '1' ){            
                //   this.$message({
                //       message: res.data.message,
                //       type: 'success'
                //   });
                // }else if(res.data.result == '2' ){
                //   this.$message({
                //       message: res.data.message,
                //       type: 'error'
                //   });
                // }
                // self.dialogFormVisible = false;
                // self.getTableList();
              }
            );
    }
  }
};
</script>

<style scoped>
  .demo-form-inline {text-align: left;}
  .el-pagination {margin: 20px 0;}
  .text-left {text-align: left;}
  .mb0 {margin-bottom: 0;}
</style>